<template>
  <div>
    <img class="btn" src="/images/clock.png" alt="" @click="load100TargetPath" />
    <!-- <el-button class="btn" type="primary" size="medium" @click="load100TargetPath">加载飞行计划</el-button> -->
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'AirLine',
  data() {
    return {
      // TargetHistory: {}
    }
  },
  mounted() {
    // this.load100TargetPath()
    this.addPlayRealtimeLister()
  },
  methods: {
    // 监听点击Animation 左侧当前时间按钮，设置时间轴刻度缩放， 使用 setTimeout 使之在下一次事件循环中 来设置时间刻度，否则会有刻度点未移动的问题
    addPlayRealtimeLister() {
      const that = this
      document.addEventListener('myTestEvent', e => {
        console.log(e)
        setTimeout(() => {
          const currentTime = that.$earth.viewer.clock.currentTime
          let TLstartTime = new Cesium.JulianDate()
          let TLstopTime = new Cesium.JulianDate()
          TLstartTime = Cesium.JulianDate.addDays(currentTime, -30, TLstartTime)
          TLstopTime = Cesium.JulianDate.addDays(currentTime, 30, TLstopTime)
          that.$earth.viewer.timeline.zoomTo(TLstartTime, TLstopTime)
          that.$earth.viewer.timeline.resize()
        }, 0)
      })
    },
    // 加载
    async load100TargetPath() {
      this.$earth.TargetHistory = new GV.TargetHistory(this.$earth.viewer)
      this.$earth.TargetHistory.smoothTrack = true

      this.$earth.TargetHistory.removeAll()

      // const that = this
      // await axios.get('/data/airLineData.json').then(res => {
      //   res.data.forEach(item => {
      //     item.forEach(innerItem => {
      //       innerItem[3] = new Date(innerItem[3]).getTime()
      //     })
      //   })
      //   that.airLineData = res.data
      // })

      const airLineData = [
        [
          [117.2153399225974, 36.849891997815924, 0, '2014/03/20 14:20:05'],
          [117.05632986957639, 36.73368672879755, 3000, '2014/03/20 14:24:05'],
          [116.68155822635669, 36.45555139727327, 3000, '2014/03/20 14:38:05'],
          [116.451031, 36.299452, 0, '2014/03/20 14:42:05']
        ],

        [
          [117.2153399225974, 36.849891997815924, 0, '2014/03/20 14:21:05'],
          [117.05632986957639, 36.73368672879755, 1800, '2014/03/20 14:24:05'],
          [116.68155822635669, 36.45555139727327, 1800, '2014/03/20 14:38:05'],
          [116.451031, 36.299452, 0, '2014/03/20 14:42:05']
        ],
        [
          [117.2153399225974, 36.849891997815924, 0, '2014/03/20 14:22:05'],
          [117.05632986957639, 36.73368672879755, 2200, '2014/03/20 14:24:05'],
          [116.68155822635669, 36.45555139727327, 2200, '2014/03/20 14:38:05'],
          [116.451031, 36.299452, 0, '2014/03/20 14:42:05']
        ],
        [
          [117.21504924901893, 36.862841415304565, 0, '2014/03/20 14:23:05'],
          [117.24752036072543, 36.85705395024084, 800, '2014/03/20 14:24:05'],
          [117.24960890416415, 36.87542490324911, 800, '2014/03/20 14:28:05'],
          [117.26645283827767, 36.86508086667846, 800, '2014/03/20 14:32:05'],
          [117.25483346601577, 36.88382434932389, 800, '2014/03/20 14:36:05'],
          [117.27639315377773, 36.87110737464638, 800, '2014/03/20 14:40:05'],
          [117.27171138497246, 36.888570065059085, 800, '2014/03/20 14:44:05'],
          [117.28814729408661, 36.877941260901686, 800, '2014/03/20 14:48:05'],
          [117.28547517710537, 36.893156766259445, 800, '2014/03/20 14:52:05'],
          [117.21571245900127, 36.86609036565227, 0, '2014/03/20 14:58:05']
        ],
        [
          [117.2143421409373, 36.86897449951245, 0, '2014/03/20 14:23:45'],
          [117.21263347217969, 36.92239645392926, 800, '2014/03/20 14:24:05'],
          [117.22963088538546, 36.91201786145003, 800, '2014/03/20 14:28:05'],
          [117.2338748035254, 36.92913973249695, 800, '2014/03/20 14:32:05'],
          [117.25092163126706, 36.912725999547845, 800, '2014/03/20 14:36:05'],
          [117.25104897963008, 36.93558921271842, 800, '2014/03/20 14:40:05'],
          [117.26727285045573, 36.91203792368037, 800, '2014/03/20 14:44:05'],
          [117.26818480488672, 36.93955286047448, 800, '2014/03/20 14:48:05'],
          [117.28961118634702, 36.91911729212078, 800, '2014/03/20 14:52:05'],
          [117.28967772341441, 36.94545879022756, 800, '2014/03/20 14:58:05'],
          [117.3287133663397, 36.93993545152351, 800, '2014/03/20 15:02:05'],
          [117.33768211747322, 36.95982626231821, 800, '2014/03/20 15:06:05'],
          [117.35812024211128, 36.93839699763942, 800, '2014/03/20 15:10:05'],
          [117.21596979064124, 36.87040120226558, 0, '2014/03/20 15:20:05']
        ],
        [
          [117.21397065152306, 36.867323808611474, 0, '2014/03/20 14:22:15'],
          [117.2992627894671, 36.84682610355904, 800, '2014/03/20 14:24:05'],
          [117.31613251485084, 36.81521111411558, 800, '2014/03/20 14:28:05'],
          [117.32325070335138, 36.85097787642881, 800, '2014/03/20 14:32:05'],
          [117.34676672577822, 36.81863154886905, 800, '2014/03/20 14:36:05'],
          [117.3569378923386, 36.85973601927455, 800, '2014/03/20 14:40:05'],
          [117.38196470690586, 36.821288319428966, 800, '2014/03/20 14:44:05'],
          [117.38470266742318, 36.86739305253848, 800, '2014/03/20 14:48:05'],
          [117.42194975926574, 36.83014937222211, 800, '2014/03/20 14:52:05'],
          [117.42355449883135, 36.87511609192112, 800, '2014/03/20 14:58:05'],
          [117.46587790506216, 36.836107056076564, 800, '2014/03/20 15:02:05'],
          [117.47552977787625, 36.876172730324015, 800, '2014/03/20 15:06:05'],
          [117.45062243965468, 36.889577543713024, 800, '2014/03/20 15:10:05'],
          [117.21656075829746, 36.86429128798921, 0, '2014/03/20 15:14:05']
        ],
        [
          [117.21726651838789, 36.86703097886809, 0, '2014/03/20 14:21:25'],
          [117.21014664271306, 36.951589609772554, 800, '2014/03/20 14:24:05'],
          [117.32564075649512, 36.99985441785526, 800, '2014/03/20 14:28:05'],
          [117.46460689031694, 36.94404525908449, 800, '2014/03/20 14:32:05'],
          [117.49575683352988, 36.817857335409705, 800, '2014/03/20 14:36:05'],
          [117.37687996986173, 36.78487889649237, 800, '2014/03/20 14:40:05'],
          [117.26662787605066, 36.81903695065773, 800, '2014/03/20 14:44:05'],
          [117.21541439007139, 36.86175074145974, 0, '2014/03/20 14:48:05']
        ],

        [
          [117.21339991083164, 36.86790684844035, 0, '2014/03/20 14:22:45'],
          [117.16769508168133, 36.89320027071092, 800, '2014/03/20 14:24:05'],
          [117.11809480720578, 36.85055819768932, 800, '2014/03/20 14:28:05'],
          [117.08266994498815, 36.91387357700471, 800, '2014/03/20 14:32:05'],
          [117.01678506149344, 36.85510806962492, 800, '2014/03/20 14:36:05'],
          [117.01037733838432, 36.94336059554854, 800, '2014/03/20 14:40:05'],
          [116.96331545075246, 36.86535855141523, 800, '2014/03/20 14:44:05'],
          [116.94042891537647, 36.947340578101326, 800, '2014/03/20 14:48:05'],
          [116.91088086624836, 36.880183371309315, 800, '2014/03/20 14:52:05'],
          [116.87850592315597, 36.94882371315562, 800, '2014/03/20 14:56:05'],
          [116.83323105345092, 36.88055637230745, 800, '2014/03/20 15:00:05'],
          [116.79856881562797, 36.95417244870338, 800, '2014/03/20 15:04:05'],
          [116.7541537583665, 36.87299470489947, 800, '2014/03/20 15:08:05'],
          [117.19719382842209, 36.85862341995886, 800, '2014/03/20 15:14:05']
        ],
        [
          [117.19649183633253, 36.861132213697644, 0, '2014/03/20 14:22:35'],
          [116.90618947778596, 36.79478996886435, 800, '2014/03/20 14:24:05'],
          [116.76586848867211, 36.67324959739461, 800, '2014/03/20 14:28:05'],
          [116.84699645432727, 36.5129051971395, 800, '2014/03/20 14:32:05'],
          [117.17887229431042, 36.496364527370766, 800, '2014/03/20 14:36:05'],
          [117.244811649564, 36.67838426815882, 800, '2014/03/20 14:40:05'],
          [117.21214160157146, 36.852459784194316, 0, '2014/03/20 14:44:05']
        ]
      ]

      airLineData.forEach(item => {
        item.forEach(innerItem => {
          innerItem[3] = new Date(innerItem[3]).getTime()
        })
      })
      airLineData.forEach((item, index) => {
        const id = `target_Test${index}`
        const tTarget = new GV.TargetItem(id, item[0][0], item[0][1], item[0][2], 0)
        tTarget.name = id
        tTarget.angle = Math.random() * 360
        const style = tTarget.style
        style.pointDisplayConditionn = new Cesium.DistanceDisplayCondition(60000000)
        style.labelDisplayCondition = new Cesium.DistanceDisplayCondition(6000, 600000)
        style.iconDisplayCondition = new Cesium.DistanceDisplayCondition(60000, 60000000)
        style.modelDisplayCondition = new Cesium.DistanceDisplayCondition(0, 600000)
        style.labeloffsetx = 10
        style.labeloffsety = -20
        style.iconSize = 32
        style.modelUrl = '/data/model/Cesium_Air.glb'
        style.iconUrl = '/data/model/003.png'
        style.color = 'white'
        this.$earth.TargetHistory.addTargetHistory(tTarget, item)
      })
      const startTime = new Date('2014/03/20 14:20:05')
      const endTime = new Date('2014/03/20 15:14:05')
      this.$earth.TargetHistory.setTimeSection(startTime, endTime)
      this.$earth.TargetHistory.pointSize = 0

      // const interpCount = 6
      // const startTime = new Date(2019, 11, 28, 1, 10, 0)
      // const endTime = new Date(2019, 11, 28, 1, 10, 50)
      // for (let m = 0; m < 50; m++) {
      //   const timePosition = []
      //   const lon1 = 113 * Math.random()
      //   const lat1 = 36 * Math.random()
      //   const alt1 = 500
      //   const startPosition = [lon1, lat1, alt1]
      //   const endPosition = [startPosition[0] + 15 * Math.random(), startPosition[1] + 15 * Math.random()]
      //   const id = `target_Test${m}`
      //   const tTarget = new GV.TargetItem(id, startPosition[0], startPosition[1], startPosition[2], 0)
      //   tTarget.name = id
      //   tTarget.angle = Math.random() * 360
      //   const style = tTarget.style
      //   style.pointDisplayConditionn = new Cesium.DistanceDisplayCondition(60000000)
      //   style.labelDisplayCondition = new Cesium.DistanceDisplayCondition(6000, 600000)
      //   style.iconDisplayCondition = new Cesium.DistanceDisplayCondition(60000, 60000000)
      //   style.modelDisplayCondition = new Cesium.DistanceDisplayCondition(0, 600000)
      //   style.labeloffsetx = 10
      //   style.labeloffsety = -20
      //   style.iconSize = 32
      //   style.modelUrl = '/data/model/Cesium_Air.glb'
      //   style.iconUrl = '/data/model/003.png'
      //   style.color = 'white'
      //   for (let i = 0; i < interpCount; i++) {
      //     const keyTime = new Date(2019, 11, 28, 1, 10, i * 10).getTime()
      //     const offsetx = this.getRandom(-3, 3)
      //     const offsety = this.getRandom(-3, 3)
      //     const keyPos = [lon1 + i * offsetx, lat1 + i * offsety, alt1, keyTime]
      //     timePosition.push(keyPos)
      //   }
      //   this.$earth.TargetHistory.addTargetHistory(tTarget, timePosition)
      // }
      // this.$earth.TargetHistory.setTimeSection(startTime, endTime)
      // this.$earth.TargetHistory.pointSize = 0
      const that = this

      // 设置时间轴为计划所在刻度
      setTimeout(() => {
        const currentTime = that.$earth.viewer.clock.currentTime

        console.log(Cesium.JulianDate.toDate(currentTime))
        let TLstartTime = new Cesium.JulianDate()
        let TLstopTime = new Cesium.JulianDate()

        TLstartTime = Cesium.JulianDate.addDays(currentTime, -30, TLstartTime)
        TLstopTime = Cesium.JulianDate.addDays(currentTime, 30, TLstopTime)

        that.$earth.viewer.timeline.zoomTo(TLstartTime, TLstopTime)
      }, 0)
    },
    getRandom(max, min) {
      return Math.round((Math.random() * (max - min) + min) * 10) / 10
    }
  }
}
</script>

<style lang="scss" scoped>
.btn {
  position: absolute;
  bottom: 28px;
  left: 170px;
  width: 30px;
  background-color: #384350;
  border-radius: 5px;

  cursor: pointer;
}
</style>
